.container{max-width: 1200px;margin:0 auto;}

.row{position: relative;}
.row:after{display: table;content: '';clear: both;}
.offset-span1{ margin-left: calc(100%/12*1)}
.offset-span2{ margin-left: calc(100%/12*2)}
.offset-span3{ margin-left: calc(100%/12*3)}
.offset-span4{ margin-left: calc(100%/12*4)}
.offset-span5{ margin-left: calc(100%/12*5)}
.offset-span6{ margin-left: calc(100%/12*6)}
.offset-span7{ margin-left: calc(100%/12*7)}
.offset-span8{ margin-left: calc(100%/12*8)}
.offset-span9{ margin-left: calc(100%/12*9)}
.offset-span10{margin-left: calc(100%/12*10)}
.offset-span11{margin-left: calc(100%/12*11)}
.offset-span11{margin-left: calc(100%/12*12)}
.span1 {width: calc(100%/12*1); display: block;float:left;}
.span2 {width: calc(100%/12*2); display: block;float:left;}
.span3 {width: calc(100%/12*3); display: block;float:left;}
.span4 {width: calc(100%/12*4); display: block;float:left;}
.span5 {width: calc(100%/12*5); display: block;float:left;}
.span6 {width: calc(100%/12*6); display: block;float:left;}
.span7 {width: calc(100%/12*7); display: block;float:left;}
.span8 {width: calc(100%/12*8); display: block;float:left;}
.span9 {width: calc(100%/12*9); display: block;float:left;}
.span10{width: calc(100%/12*10);display: block;float:left;}
.span11{width: calc(100%/12*11);display: block;float:left;}
.span12{width: calc(100%/12*12);display: block;float:left;}

@media screen and (max-width: 768px) {
	.offset-xs1{ margin-left: calc(100%/12*1)}
	.offset-xs2{ margin-left: calc(100%/12*2)}
	.offset-xs3{ margin-left: calc(100%/12*3)}
	.offset-xs4{ margin-left: calc(100%/12*4)}
	.offset-xs5{ margin-left: calc(100%/12*5)}
	.offset-xs6{ margin-left: calc(100%/12*6)}
	.offset-xs7{ margin-left: calc(100%/12*7)}
	.offset-xs8{ margin-left: calc(100%/12*8)}
	.offset-xs9{ margin-left: calc(100%/12*9)}
	.offset-xs10{margin-left: calc(100%/12*10)}
	.offset-xs11{margin-left: calc(100%/12*11)}
	.offset-xs11{margin-left: calc(100%/12*12)}

	.xs1 {width: calc(100%/12*1); display: block;float:left;}
	.xs2 {width: calc(100%/12*2); display: block;float:left;}
	.xs3 {width: calc(100%/12*3); display: block;float:left;}
	.xs4 {width: calc(100%/12*4); display: block;float:left;}
	.xs5 {width: calc(100%/12*5); display: block;float:left;}
	.xs6 {width: calc(100%/12*6); display: block;float:left;}
	.xs7 {width: calc(100%/12*7); display: block;float:left;}
	.xs8 {width: calc(100%/12*8); display: block;float:left;}
	.xs9 {width: calc(100%/12*9); display: block;float:left;}
	.xs10{width: calc(100%/12*10);display: block;float:left;}
	.xs11{width: calc(100%/12*11);display: block;float:left;}
	.xs12{width: calc(100%/12*12);display: block;float:left;}


	.xs-hide{display:none;}
}
@media screen and (min-width: 768px) {
	.offset-sm1{ margin-left: calc(100%/12*1)}
	.offset-sm2{ margin-left: calc(100%/12*2)}
	.offset-sm3{ margin-left: calc(100%/12*3)}
	.offset-sm4{ margin-left: calc(100%/12*4)}
	.offset-sm5{ margin-left: calc(100%/12*5)}
	.offset-sm6{ margin-left: calc(100%/12*6)}
	.offset-sm7{ margin-left: calc(100%/12*7)}
	.offset-sm8{ margin-left: calc(100%/12*8)}
	.offset-sm9{ margin-left: calc(100%/12*9)}
	.offset-sm10{margin-left: calc(100%/12*10)}
	.offset-sm11{margin-left: calc(100%/12*11)}
	.offset-sm11{margin-left: calc(100%/12*12)}


	.sm1 {width: calc(100%/12*1); display: block;float:left;}
	.sm2 {width: calc(100%/12*2); display: block;float:left;}
	.sm3 {width: calc(100%/12*3); display: block;float:left;}
	.sm4 {width: calc(100%/12*4); display: block;float:left;}
	.sm5 {width: calc(100%/12*5); display: block;float:left;}
	.sm6 {width: calc(100%/12*6); display: block;float:left;}
	.sm7 {width: calc(100%/12*7); display: block;float:left;}
	.sm8 {width: calc(100%/12*8); display: block;float:left;}
	.sm9 {width: calc(100%/12*9); display: block;float:left;}
	.sm10{width: calc(100%/12*10);display: block;float:left;}
	.sm11{width: calc(100%/12*11);display: block;float:left;}
	.sm12{width: calc(100%/12*12);display: block;float:left;}

	.sm-hide{display:none;}
}